<template>
    <div class="message-box">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-copy"></i> 消息中心</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-tabs v-model="message">
                <el-tab-pane :label="`最新信息(${unread.length})`" name="first">
                    <el-table :data="unread" style="width: 100%" :height="tableHeight">
                        <el-table-column>
                            <template slot-scope="scope">
                                <span class="message-title">{{scope.row.noticeInfo}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="noticeDate" width="180"></el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'tabs',
        data() {
            return {
                message     : 'first',
                unread      : [],
                userInfo    : JSON.parse(localStorage.getItem("bead_house")),
                tableHeight : document.documentElement.clientHeight-280,    // 表格高度
            }
        },
        methods: {
            /**
             * 获取消息列表
             * @param userId    用户Id
             * @param role      用户角色 1-为管理员 2-家属,
             */
            getData(userId,role){
                this.$api.getNotices({
                    userId: this.userInfo.id,
                }).then((res)=>{
                    this.unread = res.data;
                })
            },


        },
        mounted() {

        },

        /**
         * 路由进入页面之前
         * @param to
         * @param from
         * @param next
         */
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.getData();
            });
        },

        /**
         * 路由退出页面之前
         * @param to
         * @param from
         * @param next
         */
        beforeRouteLeave(to,from,next){
            next();
        },

    }

</script>

<style lang="less">

    .message-box {

        .message-title{
            cursor: pointer;
        }
        .handle-row{
            margin-top: 30px;
        }

        .el-table::before {
            height: 0px;
        }

        .el-table__header-wrapper {
            display: none;
        }
    }

</style>

